<template>
    <div>
        <Rotation :list-data="bannerList"/>
        <div>
            <div class="solve">
                <h2 style="font-size:32px;margin-bottom: 0.1rem;">业内成熟解决方案</h2>
                <div class="spanLine"></div>
                <div>纠纷案件频发、取证难维权困难、维权成本高、签约成本高的行业有签约的地方就有速裁通</div>
                <div class="dianxian" style=" position: relative;">
                    <span class="lineSize2" style="position: absolute;left: 1%;top: 30%; " v-animate="'queue-bottom'">商业银行</span>
                    <span class="lineSize" style="position: absolute;left: 13.5%;top: 92%;" v-animate="'queue-bottom'">民间借贷</span>
                    <span class="lineSize" style="position: absolute;left: 28%;top: 68%;" v-animate="'queue-bottom'">金融机构</span>
                    <span class="lineSize" style="position: absolute;left: 43.5%;top: 104%;" v-animate="'queue-bottom'">汽车金融</span>
                    <span class="lineSize" style="position: absolute;left: 58.5%;top: 62%;" v-animate="'queue-bottom'">租赁行业</span>
                    <span class="lineSize" style="position: absolute;left: 75%;top: 79%;" v-animate="'queue-bottom'">其他行业</span>
                    <span class="lineSize2" style="position: absolute;left: 94%;top: 34%;" v-animate="'queue-bottom'">个人交易</span>
                </div>
            </div>
            <div class="risk">
                <div class="riskNav">
                    <h2 style="font-size:32px">金融企业业务存证多重风险</h2>
                    <div class="spanLine" style="background-color: white;"></div>
                </div>
                <div class="riskItem">
                    <div class="riskItemList" v-for="(item,index) in riskData" :key="index" v-animate="'queue-bottom'">
                        <div class="riskYuan">
                            <div class="yuan"></div>
                        </div>
                        <div>
                            <div class="title">{{ item.title}}</div>
                            <div class="content">{{item.content}}</div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="advantage">
                <div class="advantageTitle">
                    <h2>速裁通电子合同解决方案优势</h2>
                    <div class="spanLine"></div>
                    <div>您的专属客服会致电您 并提供免费的产品演示服务</div>
                    <div class="item">
                        <div class="advantageList listColor" v-animate="'queue-bottom'">
                            <div>司法</div>
                            <div>保障</div>
                        </div>
                        <div class="contentList" v-animate="'queue-bottom'">
                            速裁通联合CA认证机构公证处、仲裁委、司法鉴定中心等权威部门，实现线上司法服务的批量化、智能化，快速出具裁决书，高效解决经济纠纷
                        </div>
                    </div>
                </div>

                <div style="display: flex;justify-content: space-between;width: 100%;flex-direction: column">

                    <div class="itemList">
                        <div class="item">
                            <div class="advantageList" v-animate="'queue-bottom'">
                                <div>降本</div>
                                <div>增效</div>
                            </div>
                            <div class="contentList" v-animate="'queue-bottom'">
                                在线签约，合同签署全程线上化；可在线下载和查看合同，电子化归档，不需要专人管理纸质合同，提高效率，降低成本
                            </div>
                        </div>
                        <div class="item">
                            <div class="advantageList" v-animate="'queue-bottom'">
                                <div>风控</div>
                                <div>升级</div>
                            </div>
                            <div class="contentList" v-animate="'queue-bottom'">
                                生成防篡改的、不可抵赖的数字签名；可信时间戳、区块链存证技术让合同内容无法篡改，在线仲裁（一键仲裁）减少维权成本
                            </div>
                        </div>
                    </div>

                </div>

            </div>
 
        </div>
    </div>
</template>

<script>
    import Rotation from "@/components/Rotation";

    export default {
        name: "solve",
        components: {
            Rotation
        },
        data() {
            return {
                bannerList: [{
                    a: '我们有成熟的解决方案',
                    b: '专属定制化服务 助力金融企业线上化 快速处置经济纠纷',
                    c: '免费试用',
                    d: '更多信息',
                    src: require("@/assets/images/jiejue/pic.png")
                },
                    {
                        a: '我们有成熟的解决方案',
                        b: '专属定制化服务 助力金融企业线上化 快速处置经济纠纷',
                        c: '免费试用',
                        d: '更多信息',
                        src: require("@/assets/images/jiejue/pic.png")
                    },
                    {
                        a: '我们有成熟的解决方案',
                        b: '专属定制化服务 助力金融企业线上化 快速处置经济纠纷',
                        c: '免费试用',
                        d: '更多信息',
                        src: require("@/assets/images/jiejue/pic.png")
                    },
                    {
                        a: '我们有成熟的解决方案',
                        b: '专属定制化服务 助力金融企业线上化 快速处置经济纠纷',
                        c: '免费试用',
                        d: '更多信息',
                        src: require("@/assets/images/jiejue/pic.png")
                    },
                ],
                riskData: [
                    {
                        title: '取证、处置周期长',
                        content: '证据散落在各个业务部门，法务部门取证周期长。没有快速处置渠道，不良资产处置周期长、回款率迟迟难以提升。'
                    },
                    {
                        title: '签约、维权成本高',
                        content: '企业业务量大、业务区域分散，需要签约各方到现场签署，无法及时有效处理。违约、纠纷案件频发，无有效处理方法及应对机制，出现纠纷时维权困难. '
                    },
                    {
                        title: '法律风险高',
                        content: '纸质合同条款、公章易篡改伪造，人工核验成本高、法律风险高。'
                    },
                    {
                        title: '合同管理乱',
                        content: '大量的合同都需要定期归档整理，查询调取麻烦。'
                    }
                ]
            }
        }
    }
</script>

<style scoped>
    .solve {
        width: 80%;
        height: 100%;
        margin: 50px auto;
        text-align: center;
        padding: 80px;
    }

    .spanLine {
        width: 67px;
        height: 2px;
        background: #1DD2AF;
    }

    .lineSize2 {
        font-size: 16px;
    }

    .lineSize {
        font-size: 24px;
    }

    .dianxian {
        margin: 0 auto;
        width: 95%;
        height: 2rem;
        margin-top: 50px;
        background-image: url(../../assets/images/jiejue/dianxian.png);
        background-size: 100% 100%;

    }


    .risk {
        width: 100%;
        height: 100%;
        padding-bottom: 80px;
        background-image: url(../../assets/images/jiejue/pic2.png);
        color: white;
    }

    .riskItem {
        margin: 0 auto;
        width: 70%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .riskNav {
        text-align: center;
        padding-top: 40px;
    }

    .riskItemList {
        width: 620px;
        margin-top: 60px;
        display: flex;
    }

    .riskYuan {
        width: 40px;
        height: 25px;
        margin-right: 40px;
    }

    .yuan {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        border: 5px solid #ffffff;
        background-color: #1DD2AF;
    }

    .title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .content {
        font-size: 18px;
    }

    .advantage {
        width: 80%;
        height: 100%;
        text-align: center;
        margin: 0 auto;
        padding-bottom: 80px;
        display: flex;
        justify-content: center;

        flex-wrap: wrap;

    }

    .advantageTitle {
        padding-top: 60px;
    }

    .itemList {
        display: flex;
        justify-content: space-around;
    }

    .advantageList {
        width: 165px;
        font-size: 30px;
        height: 165px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 60px 0;
        background-color: white;
        border-radius: 50%;
        box-shadow: 0 0 20px 0 rgba(6, 0, 1, 0.2000);
    }

    .listColor {
        color: white;
        background-color: #1DD2AF;
    }

    .contentList {
        width: 360px;
    }

    .item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column
    }

    h2 {
        font-size: 34px;
    }
</style>
